<template>
  <div class="about">
    <h1>vuex测试数据：{{store.state.msg}}</h1>
    <h1 @click="onClick">This is an about page</h1>

    <HelloWorld
    @toParent="toParent"
    msg="测试hello world信息"/>

    <h1 @click="storeClick">store测试</h1>
    <h1 v-if="state.obj.address">{{state.obj.address}}</h1>

    <h2 v-for="item in state.list" :key="item">{{item}}</h2>
     tip: {{tip}}
     arr: {{ arr }}
  </div>
</template>

<script lang="ts">

import {
  defineComponent,
  reactive,
  ref
} from 'vue'

import { useRoute, useRouter } from 'vue-router';
import {
  useStore
} from 'vuex'
import HelloWorld from '@/components/HelloWorld.vue'
// this.$route 获取路由信息    ----     useRoute
// this.$router.push 跳转路由的方法 --- useRouter
export default defineComponent({
  props: {
    tip: {
      type: String
    },
    arr: {
      type: Array
    }
  },
  components: {
    HelloWorld
  },
  setup () {
    const state = reactive({
      obj: {
        name: 'devin',
        age: '12'
      },
      list: ['北京', '上海', '天津', '重庆']
    })

    const route = useRoute();
    const router = useRouter();
    const store = useStore();

    const onClick = () => {
      // console.log(route, 'route')
      // router.push('/')
    }
    const toParent = (msg: string) => {
      console.log('toParent:事件', msg)
    }

    const storeClick = () => {
      console.log('store:', store)
      store.commit('SET_MSG', '我是vuex更新后的数据')
      store.dispatch('update_msg', '我是vuex异步提交的数据')
      // store.commit --> 提交给mutation
      // store.dispatch --> 提交给action
    }

    return {
      state,
      onClick,
      storeClick,
      store,
      toParent
    }
  }
})

//
// export default defineComponent({
//   data () {
//     return {
//       obj: {
//         name: 'hello',
//         age: 123
//       },
//       list: ['北京', '上海', '天津', '重庆']
//     }
//   },
//   methods: {
//     onClick () {
//       this.obj.address = '上海市奉贤区'
//       this.list[4] = '杭州'
//       console.log(this.list, 'oibk')
//     }
//   },
//   watch: {
//     list: {}
//   }
// })

// defineComponent 帮助你使用ts

/**
 * 1. 定义响应式数据
 * reactive 一般用来定义 引用类型 [] {}
 * ref  一般用来定义 基本类型
 *
 * 2.
 *  组件props 父子传参
 *  子父传参数
 *
 * 3. 调用路由
 *   import {} from 'vue'
 *
 * 3. 调用vuex
 *   import {} from 'vue'
 *
 */
</script>


